<script lang="ts" setup>
import ImageError from '@/assets/images/ImageError.png'
interface Props {
  width: string
  height: string | number
  src?: string
  lazy?: boolean
  root?: string
  previewDisabled?: boolean
  objectFit?: string
}
const props = withDefaults(defineProps<Props>(), {
  width: '',
  height: '',
  src: '',
  previewDisabled: false,
  objectFit: 'cover ',
  lazy: false,
  root: '',
})
/**
 * 图片组件
 * width 图片宽度
 * height 图片高度
 * src 图片来源
 * lazy 是否在进入 intersection-observer-options 配置的视口之后再开始加载
 * root 配置的视口类名或者节点
 * previewDisabled 是否禁用单击图像预览
 * objectFit 图片在容器内的的适应类型'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 */
const { width, height, src, previewDisabled, objectFit, lazy, root } = toRefs(props)
</script>

<template>
  <n-image
    :width="width"
    :height="height"
    :src="src"
    :fallback-src="ImageError"
    :preview-disabled="previewDisabled"
    :object-fit="objectFit"
    :lazy="lazy"
    :intersection-observer-options="{ root }"
    show-toolbar
    show-toolbar-tooltip
    alt="图片"
    border-rd-5
    class="Cimage"
  />
</template>

<style lang="scss" scoped>
.Cimage{
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
